<template>

	<picker :value="index" :range="list.map(x=>x.name)" @change="onchange">
		<view class="place-holder" v-if="index<0">
			{{palceHolder}}
		</view>
		<view v-else class="uni-input">{{list[index].name}}</view>
	</picker>

</template>

<script>
	export default {
		name: "single-picker",
		props: {
			value: {
				type: [String, Number],
				default: undefined
			},
			//[{label:'xxx',value:"1"}]
			list: {
				type: Array,
				default: () => []
			},
			palceHolder: {
				type: String,
				default: "请选择"
			}
		},
		watch: {
			value(newVal) {
				console.log(newVal)
				this.index = this.list.findIndex(x => x.id === newVal)
				console.log(this.index)
			}
		},
		data() {
			return {
				selected: null,
				index: -1,

			}
		},
		mounted() {

		},
		methods: {
			onchange(e) {
				console.log(e)
				this.index = e.detail.value
				if (this.index == -1) {
					this.$emit('input', null)
				} else {
					this.selected = this.list[this.index].id
					this.$emit('input', this.selected)
				}


			}
		}
	}
</script>

<style scoped>
	.place-holder {
		color: rgb(128,128,128);
	}
</style>
